<!--
* @description 全部巡检-清单
* @author zywu
* @date 2021/03/12 16:31:24
!-->
<template>
  <div class="inspectList">
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list v-model="loading" :finished="finished" @load="onLoad" class="list-card"
        :finished-text="listData.length > 0 ? '暂无更多' : ''">
        <van-cell class="inspectList_cell" v-for="(item) in listData" :key="item.id">
          <inspect-module :data-obj="item" @invite_others="invite_others" @receive_invite="receive_invite"
            @startInspect="startInspect" />
        </van-cell>
      </van-list>
      <div style="display: flex;align-items: center;width: 100%;justify-content: center;"
        v-if="listData == null || listData.length == 0">
        <img src="../../assets/img/inspect/inspect_null.png" alt style="width:70%;" />
      </div>
    </van-pull-refresh>
    <!-- 领取巡检 -->
    <van-popup v-model="drawPopup" position="bottom" :style="{ height: '200px' }" round>
      <div class="draw_top">
        <span class="draw_top_top">你确认领取本巡检任务吗？</span>
        <span class="draw_top_bottom" @click="invite_others(listOne)">邀请他人一起巡检</span>
      </div>
      <div class="draw_button">
        <van-button type="default" @click="drawPopup = false">取消</van-button>
        <van-button type="info" class="affirm" @click="sure_invite()" color="#2471ca">确定</van-button>
      </div>
    </van-popup>
    <!-- 邀请他人 -->
    <van-popup v-model="showPopup" position="bottom" :style="{ height: '70%', padding: '0px 0 44px 0' }" round>
      <personnel :lliablepersonsUser="lliablepersonsUser" @childByValue="childByValue" @closeIreceive="closeIreceive" />
    </van-popup>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { Toast } from 'vant'
import {
  getTaskList,
  inviteOthers,
  getTaskCount,
  activeObtaining,
} from '@/api/inspect'
import personnel from './personnel'
import InspectModule from './InspectModule'
export default {
  computed: {
    ...mapState(['userInfo', 'isRenovate']),
  },
  props: {
    status: {
      type: Number,
    },
    isActive: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      listData: [],
      loading: false,
      finished: false,
      refreshing: false,
      total: 0,
      showPopup: false,
      drawPopup: false,
      pivotColor: '#5BD1B9',
      lliablepersonsUser: [],
      listOne: {},
    }
  },

  components: { personnel, InspectModule },

  watch: {
    isRenovate(val) {
      if (
        val &&
        this.status == 1 &&
        this.$route.name == 'InspectMain' &&
        this.isActive
      ) {
        this.finished = false
      }
    },
    isActive(val) {
      if (val && this.status == 1 && this.isRenovate) {
        this.$nextTick(() => {
          this.finished = false
        })
      }
    },
  },

  created() {
    window.testReceive = () => {
      this.$store.commit('isRenovateChange', true)
    }
  },

  mounted() { },

  activated() {
    if (this.status == 1 && this.isRenovate) {
      this.$nextTick(() => {
        this.finished = false
      })
    }
  },

  methods: {
    onLoad() {
      getTaskList({
        account: this.userInfo.accountName,
        status: this.status == 0 ? 3 : this.status == 1 ? 1 : 0
      }).then((res) => {
        if (this.refreshing) {
          this.total = 0
          this.listData = []
          this.refreshing = false
        }
        this.loading = false
        this.listData = res.data || []
        this.total = res.total
        this.finished = this.listData.length >= this.total
        this.getTitleNum()
        if (this.status == 1) this.$store.commit('isRenovateChange', false)
      })
    },
    getTitleNum() {
      getTaskCount({
        account: this.userInfo.accountName,
      }).then((res) => {
        this.$emit('getLittleNum', res.data)
      })
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false
      this.listData = []
      this.total = 0
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true
      this.onLoad()
    },
    // 邀请他人
    invite_others(item) {
      let _this = this
      if (
        item.lliablepersonsList == null ||
        item.lliablepersonsList.length == 0
      ) {
        Toast('暂无可邀请人员')
        return
      }
      _this.listOne = item
      _this.lliablepersonsUser = item.lliablepersonsList
      _this.showPopup = true
    },
    // 子组件传递过来的数据
    childByValue(item) {
      let _this = this
      inviteOthers({
        invitedAccounts: item.join(),
        taskId: _this.listOne.id,
        inviteAccount: _this.$store.state.userInfo.accountName,
      }).then((res) => {
        if (res.status === 200) {
          _this.drawPopup = false
          _this.onLoad()
          _this.$store.commit('isRenovateChange', true)
          Toast('邀请他人成功')
        }
      })
      this.showPopup = false
      this.drawPopup = false
    },
    // 领取
    receive_invite(item) {
      let _this = this
      _this.listOne = item
      _this.drawPopup = true
    },
    closeIreceive() {
      let _this = this
      _this.showPopup = false
    },
    // 领取任务
    sure_invite() {
      let _this = this
      activeObtaining({
        taskId: _this.listOne.id,
        account: _this.$store.state.userInfo.accountName,
      }).then((res) => {
        if (res.status === 200) {
          _this.drawPopup = false
          _this.onLoad()
          _this.$store.commit('isRenovateChange', true)
          Toast('领取成功')
        }
      })
    },
    // 开始巡检
    startInspect(item) {
      this.$router.push({
        name: 'InspectDetail',
        query: { item: item.id },
        params: { refresh: true }
      })
    },
  },
}
</script>
<style lang='scss'>
.van-cell::after {
  content: none;
}

.inspectList {
  margin-top: 60px;

  .draw_top {
    height: 140px;
    display: inline-flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .draw_top_top {
      font-size: 18px;
      font-weight: bold;
      color: #333333;
    }

    .draw_top_bottom {
      font-size: 16px;
      color: #2471ca;
      margin-top: 20px;
    }
  }

  .draw_button {
    width: 100%;
    display: flex;
    position: fixed;
    bottom: 0px;

    button {
      width: 50%;
    }

    .draw_button_left {
      border-top: 1px solid #e1e1e1;
      width: 50%;
      text-align: center;
    }

    .draw_button_right {
      width: 50%;
      display: block;
      background: #2471ca;
      color: #fff;
      text-align: center;
    }
  }

  .list-card {
    // padding: 0;
    padding-bottom: 20px;
  }

  .van-pull-refresh {
    padding: 0 15px;
  }
}

.inspectList_cell {
  box-shadow: 0px 2px 10px 2px rgba(181, 200, 206, 0.5);
  border-radius: 5px;
  margin-top: 10px;
  padding: 0;
}
</style>